<template>
  <div id="editPage">
    <fileListTreePage
      :fileList="project.getFileGroup()[0].getFile()[0]"
      class="fileList"
      v-on:ClickTranslateFileItem="onClickTranslateFileItem"
    />
    <translateBoxPage
      class="translateBox"
      :currentTranslate="currentTranslate.text"
    ></translateBoxPage>
    <historyPage
      class="history"
      :historyList="currentTranslate.text.getLastEdit()"
    />
  </div>
</template>

<script lang="ts">
    import { Vue, Component, Prop } from 'vue-property-decorator';
    //page
    import translateBoxPage from './translateBox/TranslateBoxPage.vue';
    import fileListTreePage from './translateBox/FileListTreePage.vue';
    import historyPage from './translateBox/historyPage.vue';
    //file
    import project from '../../../script/file/project';
    import translateItem from '../../../script/file/translateItem';
  import pluginManager from '../../../script/file/manager';
    @Component({
      name: 'editPage',
      components: {
        translateBoxPage,
        fileListTreePage,
        historyPage,
      },
    })
    export default class editPage extends Vue {

      project: project = this.$root.$data.store.currentProject.project;
      currentTranslate = {
        text: this.project
          .getFileGroup()[0]
          .getFile()[0]
          .getFileContent()[0],
        index: 0,
      };

      onClickTranslateFileItem(event, i) {
        this.currentTranslate = {
          text: event,
          index: i,
        };
      }
    }
</script>

<style scoped>
  #editPage {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
  }
  .fileList {
    height: 100%;
    width: 25%;
    background: rgb(129, 170, 197);
    overflow-y: auto;
  }
  .translateBox {
    height: 100%;
    width: 55%;
    background: rgb(123, 123, 255);
    overflow-y: auto;
  }
  .history {
    height: 100%;
    width: 20%;
    background-color: #24f864;
    overflow-y: auto;
  }
</style>
